<template>
  <div class="addSpace">
    <!-- 新增空间 -->
    <showBanner class="white"></showBanner>
    <div class="content">
      <el-steps :active='this.activeNum' simple finish-status="success" style="margin-top: 20px;width:1000px;">
        <el-step title="基本信息"></el-step>
        <el-step title="图片上传"></el-step>
        <el-step title="设置价格"></el-step>
        <el-step title="配套服务"></el-step>
      </el-steps>
    </div>
    <!-- 基本信息 -->
    <div v-show="this.activeNum===1" style="width:1000px;margin:32px auto;">
      <el-form ref="spaceInfoform" :rules="rules" :model="spaceInfoform" label-width="300px" validate-on-rule-change>
        <el-form-item label="空间名称" prop="spaceName">
          <template>
            <el-input v-model="spaceInfoform.spaceName" maxlength style="width:460px;margin-top:-8px;" placeholder="请输入空间名称"></el-input>
          </template>
        </el-form-item>
        <el-form-item label="空间logo" prop="avatar">
          <div class="uploadBox">
            <el-upload action="" list-type="picture-card" :file-list="fileList1" :multiple="multiple" :class="{disabled:uploadDisabled}"  :on-preview="handlePictureCardPreview" :http-request="uploadImg" :on-remove="handleRemove" style="margin-top:20px;margin-left:-65px">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="spaceInfoform.avatar" alt="">
            </el-dialog>
          </div>
        </el-form-item>
        <el-form-item label="空间首页图" prop="cover">
          <div class="uploadBox">
            <!-- <el-upload class="avatar-uploader" :action="uploadImgUrl"  :show-file-list="false" :data="{funName:'setProductImg'}" :limit="1" :http-request="uploadImg" :before-upload="beforeAvatarUpload" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload> -->
            <el-upload action="" list-type="picture-card" :file-list="fileList2" :limit="1" :on-preview="handlePictureCardPreview" :before-upload="beforeAvatarUpload" :http-request="uploadImg1" :on-remove="handleRemove" style="margin-top:20px;margin-left:-65px">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false">
              <img width="100%" :src="spaceInfoform.cover" alt="">
            </el-dialog>
          </div>
          <div style="width:400px;font-size:12px;font-family:microsoft yahei;color:rgba(249,53,70,1);">建议图片尺寸比例为16:9，类型为JPG,PNG,JPEG,大小不超过5M</div>
        </el-form-item>
        <el-form-item label="空间标题" prop="title">
          <template>
            <el-input v-model="spaceInfoform.title" style="width:460px;margin-top:-8px;" placeholder="请输入空间标题"></el-input>
          </template>
        </el-form-item>
        <el-form-item label="空间类型" prop="type">
          <template>
            <el-select v-model="type" @change="Change(type)" placeholder="请选择空间类型" style="width:460px;margin-top:-8px;">
              <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="联系方式" prop="mobile">
          <template>
            <el-input v-model="spaceInfoform.mobile" style="width:460px;margin-top:-8px;" placeholder="请输入手机号码"></el-input>
          </template>
        </el-form-item>
        <el-form-item label="建筑风格" prop="architecturalStyle">
          <template>
            <el-tag :key="tag" v-for="tag in architecturalStyleList" closable :disable-transitions="false" @close="handleClose(tag)">
              {{tag}}
            </el-tag>
            <el-input class="input-new-tag" v-if="inputVisible" v-model="architecturalStyle" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+新标签</el-button>
          </template>
        </el-form-item>
        <el-form-item label="空间特色" prop="feature">
          <template>
            <el-tag :key="tag1" v-for="tag1 in featureList" closable :disable-transitions="false" @close="handleClose1(tag1)">
              {{tag1}}
            </el-tag>
            <el-input class="input-new-tag" v-if="inputVisible1" v-model="feature" ref="saveTagInput1" size="small" @keyup.enter.native="handleInputConfirm1" @blur="handleInputConfirm1">
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput1">+新标签</el-button>
          </template>
        </el-form-item>
        <el-form-item label="空间简介" prop="description">
          <template>
            <el-input type="textarea" :rows="7" style="width:460px;margin-top:-8px;" v-model="spaceInfoform.description"></el-input>
          </template>
        </el-form-item>
        <el-form-item label="空间地址" prop="address">
          <template>
            <baidu-map class="bm-view" style="height:400px;width:460px;margin-top:-42px" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @click="getClickInfo" @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
              <bm-view class="map" style="height:300px;width:460px;margin-top:50px"></bm-view>
              <bm-marker :position="{lng: center.lng, lat: center.lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
              </bm-marker>
              <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
              <bm-control :offset="{width: '10px', height: '10px'}">
                <bm-auto-complete v-model="spaceInfoform.address" :sugStyle="{zIndex: 1}">
                  <el-input style="width:460px;margin-top:-280px;" placeholder="请输入空间地址"></el-input>
                </bm-auto-complete>
              </bm-control>
              <bm-local-search :keyword="spaceInfoform.address" :pageCapacity="2" :auto-viewport="true"></bm-local-search>
            </baidu-map>
          </template>
        </el-form-item>
      </el-form>
      <div style="display:flex;justify-content:center;margin-top:50px">
        <el-button type="primary" @click="onSelectStep('spaceInfoform')" @keyup.enter.native="onSelectStep('spaceInfoform')">下一步</el-button>
      </div>
    </div>
    <!-- 图片上传 -->
    <div v-show="this.activeNum===2" style="width:1000px;margin:32px auto;">
      <el-form ref="spaceInfoformImg" :rules="rules1" :model="spaceInfoformImg" label-width="100px" validate-on-rule-change>
        <el-form-item label="公共区域" style="margin-left:25px"><br>
          <!-- v-if="spaceInfoformImg.type===1" -->
          <template>
            <el-input v-model="spaceInfoformImg.des" style="width:460px;margin-left:-65px;margin-top:-8px;" placeholder="请输入公共区域描述"></el-input>
            <el-input placeholder="公共区域" v-model="spaceInfoformImg.roomName" :disabled="true" v-show="show=false"></el-input>
            <el-upload action="uploadImgUrl" ref="uploadb" :multiple="multiple" list-type="picture-card" :auto-upload="false" :file-list="fileList3" :on-preview="handlePictureCardPreview" :http-request="uploadImg3" :on-remove="handleRemove" style="margin-top:20px;margin-left:-65px">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-button type="primary" @click="submit" style="margin-top:20px;margin-left:-65px">确认上传</el-button>
            <!-- <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="spaceInfoformImg.paths" alt="">
            </el-dialog> -->
          </template>
        </el-form-item>
        <!-- </el-form>
      <el-form ref="spaceInfoformPrice" :rules="rules2" :model="spaceInfoformPrice" label-width="100px" validate-on-rule-change> -->
        <el-form-item label="房间" v-show="this.showRoom"><br>
          <div v-for="(room, i) in spaceInfoformImg.rooms" :key="i">
            <el-input v-model="room.roomName" style="width:160px;margin-left:-40px;margin-top:-8px;" placeholder="请输入房间名称"></el-input>
            <el-input v-model="room.des" style="width:360px;margin-left:20px;margin-top:-8px;" placeholder="请输入房间朝向;面积;层高"></el-input>
            <el-button type="primary" @click="add(room,i)">新增房间</el-button>
            <el-button type="primary" @click="del(room)">删除房间</el-button>
            <el-upload action="uploadImgUrl" ref="uploada" :multiple="multiple" list-type="picture-card" :auto-upload="false" :file-list="fileList4[i]" :on-preview="handlePictureCardPreview" :http-request="uploadImg2" :on-remove="handleRemove" style="margin-top:20px;margin-left:-40px">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-button type="primary" @click="submit1(room)" style="margin-top:20px;margin-left:-40px;margin-bottom:20px">确认上传</el-button>
            <!-- <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="room.paths" alt="">
            </el-dialog> -->
          </div>
        </el-form-item>
        <!-- </el-form>
      <el-form ref="spaceInfoformService" :rules="rules3" :model="spaceInfoformService" label-width="100px" validate-on-rule-change> -->
        <el-form-item label="样片上传" style="margin-left:25px"><br>
          <div v-for="(yp,index) in spaceInfoformImg.ypList" :key="index">
            <el-input v-model="yp.roomName" style="width:160px;margin-left:-65px;margin-top:-8px;" placeholder="请输入摄影师"></el-input>
            <el-input v-model="yp.des" style="width:160px;margin-left:20px;margin-top:-8px;" placeholder="请输入模特"></el-input>
            <el-button type="primary" @click="addYp(yp,index)">新增样片</el-button>
            <el-button type="primary" @click="delYp(yp)">删除样片</el-button>
            <el-upload action="uploadImgUrl" ref="upload" :multiple="multiple" list-type="picture-card" :auto-upload="false" :file-list="fileList5[index]" :on-preview="handlePictureCardPreview" :http-request="uploadImg4" :on-remove="handleRemove" style="margin-top:20px;margin-left:-65px">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-button type="primary" @click="submit2(yp)" style="margin-top:20px;margin-left:-65px;margin-bottom:20px">确认上传</el-button>
            <!-- <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="yp.paths" alt="">
            </el-dialog> -->
          </div>
        </el-form-item>
      </el-form>
      <div style="display:flex;justify-content:center;">
        <!-- <el-button @click="onPrevStepScd()">上一步
        </el-button> -->
        <el-button type="primary" @click="onNextStepScd()">下一步</el-button>
      </div>
    </div>
    <!-- 设置价格 -->
    <div v-show="this.activeNum===3" style="width:1000px;margin:32px auto;">
      <el-form ref="spaceInfoformPrice" :rules="rules2" :model="spaceInfoformPrice" label-width="150px" validate-on-rule-change>
        <el-checkbox v-model="checked">设置全天拍摄时间：</el-checkbox><br>
        <el-form-item v-if="checked" style="margin-top:-28px;margin-left:20px" prop="qtTime">
          <template>
            <el-time-select v-model="spaceInfoformPrice.startTime" value-format="HH:mm" style="width:120px;margin-top:-8px;" :picker-options="{start: '05:00',step: '00:30',end: '20:00'}" placeholder="开始时间"></el-time-select>
            <span>~</span>
            <el-time-select v-model="spaceInfoformPrice.endTime" value-format="HH:mm" style="width:120px;margin-top:-8px;" :picker-options="{start: '05:00',step: '00:30',end: '20:00',minTime: spaceInfoformPrice.startTime}" placeholder="结束时间"></el-time-select>
          </template>
        </el-form-item>
        <el-form-item label="平时价格" v-if="checked" style="margin-top:-8px;margin-left:-70px"></el-form-item>
        <el-form-item label="公共区域" v-if="checked" style="margin-top:-8px;margin-left:-50px" prop="publicPrice">
          <el-input v-model="spaceInfoformPrice.publicPrice" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="房间价格" v-if="checked" v-show="this.showRoom" style="margin-top:-62px;margin-left:200px" prop="roomPrice">
          <el-input v-model="spaceInfoformPrice.roomPrice" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="人数限制" v-if="checked" style="margin-top:-62px;margin-left:450px" prop="maxPeople">
          <el-input v-model="spaceInfoformPrice.maxPeople" style="width:140px;margin-top:-8px;" placeholder="可接纳最多人数"></el-input>
        </el-form-item>
        <el-form-item label="允许进场器材" v-if="checked" style="margin-top:-8px;margin-left:-40px"></el-form-item>
        <el-form-item v-if="checked" style="margin-top:-62px;margin-left:-40px" prop="admissionEquipment">
          <el-checkbox-group v-model="spaceInfoformPrice.admissionEquipment" v-for="item in checkLists" :key="item.id" style="display:inline-block">
            <el-checkbox :label="item.name" @change="checkBoxList" style="margin-left:10px"></el-checkbox>
            <el-input v-model="costPoints[item.name]" @input="aaa" v-if="spaceInfoformPrice.admissionEquipment.includes(item.name)" placeholder="最多数量" style="width:100px;margin-top:-8px;" @change="print"></el-input>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="周末节假日价格" v-if="checked" style="margin-top:-8px;margin-left:-25px"></el-form-item>
        <el-form-item label="公共区域" v-if="checked" style="margin-top:-8px;margin-left:-50px" prop="publicWeekendPrice">
          <el-input v-model="spaceInfoformPrice.publicWeekendPrice" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="房间价格" v-if="checked" v-show="this.showRoom" style="margin-top:-62px;margin-left:200px" prop="roomWeekendPrice">
          <el-input v-model="spaceInfoformPrice.roomWeekendPrice" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="人数限制" v-if="checked" style="margin-top:-62px;margin-left:450px" prop="maxPeopleWeekend">
          <el-input v-model="spaceInfoformPrice.maxPeopleWeekend" style="width:140px;margin-top:-8px;" placeholder="可接纳最多人数"></el-input>
        </el-form-item>
        <el-form-item label="允许进场器材" v-if="checked" style="margin-top:-8px;margin-left:-40px"></el-form-item>
        <el-form-item v-if="checked" style="margin-top:-62px;margin-left:-40px" prop="admissionEquipmentWeekend">
          <el-checkbox-group v-model="spaceInfoformPrice.admissionEquipmentWeekend" v-for="item in checkLists" :key="item.id" style="display:inline-block">
            <el-checkbox :label="item.name" style="margin-left:10px"></el-checkbox>
            <el-input v-model="costPoints2[item.name]" v-if="spaceInfoformPrice.admissionEquipmentWeekend.includes(item.name)" placeholder="最多数量" style="width:100px;margin-top:-8px;"></el-input>
          </el-checkbox-group>
        </el-form-item>
        <!-- </el-form-item> -->
        <el-checkbox v-model="checkSBT">设置上半天拍摄时间：</el-checkbox><br>
        <el-form-item v-if="checkSBT" style="margin-top:-28px;margin-left:20px" prop="sbtTime">
          <template>
            <el-time-select v-model="spaceInfoformPrice.startTimeAm" value-format="HH:mm" style="width:120px;margin-top:-8px;" :picker-options="{start: '05:00',step: '00:30',end: '20:00'}" placeholder="开始时间"></el-time-select>
            <span>~</span>
            <el-time-select v-model="spaceInfoformPrice.endTimeAm" value-format="HH:mm" style="width:120px;margin-top:-8px;" :picker-options="{start: '05:00',step: '00:30',end: '20:00',minTime: spaceInfoformPrice.startTimeAm}" placeholder="结束时间"></el-time-select>
          </template>
        </el-form-item>
        <el-form-item label="平时价格" v-if="checkSBT" style="margin-top:-8px;margin-left:-70px"></el-form-item>
        <el-form-item label="公共区域" v-if="checkSBT" style="margin-top:-8px;margin-left:-50px" prop="publicPriceHalfAm">
          <el-input v-model="spaceInfoformPrice.publicPriceHalfAm" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="房间价格" v-if="checkSBT" v-show="this.showRoom" style="margin-top:-62px;margin-left:200px" prop="roomPriceHalfAm">
          <el-input v-model="spaceInfoformPrice.roomPriceHalfAm" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="人数限制" v-if="checkSBT" style="margin-top:-62px;margin-left:450px" prop="maxPeopleAm">
          <el-input v-model="spaceInfoformPrice.maxPeopleAm" style="width:140px;margin-top:-8px;" placeholder="可接纳最多人数"></el-input>
        </el-form-item>
        <el-form-item label="允许进场器材" v-if="checkSBT" style="margin-top:-8px;margin-left:-40px"></el-form-item>
        <el-form-item v-if="checkSBT" style="margin-top:-62px;margin-left:-40px" prop="admissionEquipmentAm">
          <el-checkbox-group v-model="spaceInfoformPrice.admissionEquipmentAm" v-for="item in checkLists" :key="item.id" style="display:inline-block">
            <el-checkbox :label="item.name" style="margin-left:10px"></el-checkbox>
            <el-input v-model="costPoints3[item.name]" v-if="spaceInfoformPrice.admissionEquipmentAm.includes(item.name)" placeholder="最多数量" style="width:100px;margin-top:-8px;" @change="print"></el-input>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="周末节假日价格" v-if="checkSBT" style="margin-top:-8px;margin-left:-25px"></el-form-item>
        <el-form-item label="公共区域" v-if="checkSBT" style="margin-top:-8px;margin-left:-50px" prop="publicWeekendPriceHalfAm">
          <el-input v-model="spaceInfoformPrice.publicWeekendPriceHalfAm" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="房间价格" v-if="checkSBT" v-show="this.showRoom" style="margin-top:-62px;margin-left:200px" prop="roomWeekendPriceHalfAm">
          <el-input v-model="spaceInfoformPrice.roomWeekendPriceHalfAm" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="人数限制" v-if="checkSBT" style="margin-top:-62px;margin-left:450px" prop="maxPeopleAmWeekend">
          <el-input v-model="spaceInfoformPrice.maxPeopleAmWeekend" style="width:140px;margin-top:-8px;" placeholder="可接纳最多人数"></el-input>
        </el-form-item>
        <el-form-item label="允许进场器材" v-if="checkSBT" style="margin-top:-8px;margin-left:-40px"></el-form-item>
        <el-form-item v-if="checkSBT" style="margin-top:-62px;margin-left:-40px" prop="admissionEquipmentAmWeekend">
          <el-checkbox-group v-model="spaceInfoformPrice.admissionEquipmentAmWeekend" v-for="item in checkLists" :key="item.id" style="display:inline-block">
            <el-checkbox :label="item.name" style="margin-left:10px"></el-checkbox>
            <el-input v-model="costPoints4[item.name]" v-if="spaceInfoformPrice.admissionEquipmentAmWeekend.includes(item.name)" placeholder="最多数量" style="width:100px;margin-top:-8px;"></el-input>
          </el-checkbox-group>
        </el-form-item>
        <el-checkbox v-model="checkXBT">设置下半天拍摄时间：</el-checkbox>
        <el-form-item v-if="checkXBT" style="margin-top:-28px;margin-left:20px" prop="xbtTime">
          <template>
            <el-time-select v-model="spaceInfoformPrice.startTimePm" value-format="HH:mm" style="width:120px;margin-top:-8px;" :picker-options="{start: '05:00',step: '00:30',end: '20:00'}" placeholder="开始时间"></el-time-select>
            <span>~</span>
            <el-time-select v-model="spaceInfoformPrice.endTimePm" value-format="HH:mm" style="width:120px;margin-top:-8px;" :picker-options="{start: '05:00',step: '00:30',end: '20:00',minTime: spaceInfoformPrice.startTimePm}" placeholder="结束时间"></el-time-select>
          </template>
        </el-form-item>
        <el-form-item label="平时价格" v-if="checkXBT" style="margin-top:-8px;margin-left:-70px"></el-form-item>
        <el-form-item label="公共区域" v-if="checkXBT" style="margin-top:-8px;margin-left:-50px" prop="publicPriceHalfPm">
          <el-input v-model="spaceInfoformPrice.publicPriceHalfPm" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="房间价格" v-if="checkXBT" v-show="this.showRoom" style="margin-top:-62px;margin-left:200px" prop="roomPriceHalfPm">
          <el-input v-model="spaceInfoformPrice.roomPriceHalfPm" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="人数限制" v-if="checkXBT" style="margin-top:-62px;margin-left:450px" prop="maxPeoplePm">
          <el-input v-model="spaceInfoformPrice.maxPeoplePm" style="width:140px;margin-top:-8px;" placeholder="可接纳最多人数"></el-input>
        </el-form-item>
        <el-form-item label="允许进场器材" v-if="checkXBT" style="margin-top:-8px;margin-left:-40px"></el-form-item>
        <el-form-item v-if="checkXBT" style="margin-top:-62px;margin-left:-40px" prop="admissionEquipmentPm">
          <el-checkbox-group v-model="spaceInfoformPrice.admissionEquipmentPm" v-for="item in checkLists" :key="item.id" style="display:inline-block">
            <el-checkbox :label="item.name" style="margin-left:10px"></el-checkbox>
            <el-input v-model="costPoints5[item.name]" v-if="spaceInfoformPrice.admissionEquipmentPm.includes(item.name)" placeholder="最多数量" style="width:100px;margin-top:-8px;"></el-input>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="周末节假日价格" v-if="checkXBT" style="margin-top:-8px;margin-left:-25px"></el-form-item>
        <el-form-item label="公共区域" v-if="checkXBT" style="margin-top:-8px;margin-left:-50px" prop="publicWeekendPriceHalfPm">
          <el-input v-model="spaceInfoformPrice.publicWeekendPriceHalfPm" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="房间价格" v-if="checkXBT" v-show="this.showRoom" style="margin-top:-62px;margin-left:200px" prop="roomWeekendPriceHalfPm">
          <el-input v-model="spaceInfoformPrice.roomWeekendPriceHalfPm" style="width:120px;margin-top:-8px;" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="人数限制" v-if="checkXBT" style="margin-top:-62px;margin-left:450px" prop="maxPeoplePmWeekend">
          <el-input v-model="spaceInfoformPrice.maxPeoplePmWeekend" style="width:140px;margin-top:-8px;" placeholder="可接纳最多人数"></el-input>
        </el-form-item>
        <el-form-item label="允许进场器材" v-if="checkXBT" style="margin-top:-8px;margin-left:-40px"></el-form-item>
        <el-form-item v-if="checkXBT" style="margin-top:-62px;margin-left:-40px" prop="admissionEquipmentPmWeekend">
          <el-checkbox-group v-model="spaceInfoformPrice.admissionEquipmentPmWeekend" v-for="item in checkLists" :key="item.id" style="display:inline-block">
            <el-checkbox :label="item.name" style="margin-left:10px"></el-checkbox>
            <el-input v-model="costPoints6[item.name]" v-if="spaceInfoformPrice.admissionEquipmentPmWeekend.includes(item.name)" placeholder="最多数量" style="width:100px;margin-top:-8px;"></el-input>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div style="display:flex;justify-content:center;">
        <!-- <el-button @click="onPrevStepThd()">上一步
        </el-button> -->
        <el-button type="primary" @click="onNextStepThr('spaceInfoformPrice')">下一步</el-button>
      </div>
    </div>
    <!-- 配套服务 -->
    <div v-show="this.activeNum===4" style="width:1200px;margin:32px auto;">
      <el-form ref="spaceInfoformService" :rules="rules3" :model="spaceInfoformService" label-width="300px" validate-on-rule-change>
        <el-form-item label="提前入驻" prop="stayPrice" v-show="this.showRoom">
          <el-input v-model="spaceInfoformService.stayPriceFc" style="width:168px;margin-top:-8px;" placeholder="请输入方寸平台价格"></el-input>
          <span>/间</span>
          <el-input v-model="spaceInfoformService.stayPriceMd" style="width:168px;margin-top:-68px;margin-left:50px" placeholder="请输入门店价格"></el-input>
          <span>/间</span>
        </el-form-item>
        <el-form-item label="工作午餐" prop="lunchPrice" v-show="this.showRoom">
          <el-input v-model="spaceInfoformService.lunchPriceFc" style="width:168px;margin-top:-8px;" placeholder="请输入方寸平台价格"></el-input>
          <span>/人</span>
          <el-input v-model="spaceInfoformService.lunchPriceMd" style="width:168px;margin-top:-58px;margin-left:50px" placeholder="请输入门店价格"></el-input>
          <span>/间</span>
          <!-- <el-input v-model="spaceInfoform.lunchPriceMd" style="width:168px;margin-top:-8px;margin-left:90px" placeholder="请输入门店价格"></el-input><span>/人</span> -->
        </el-form-item>
        <el-form-item label="工作晚餐" prop="dinnerPrice" v-show="this.showRoom">
          <el-input v-model="spaceInfoformService.dinnerPriceFc" style="width:168px;margin-top:-8px;" placeholder="请输入方寸平台价格"></el-input>
          <span>/人</span>
          <el-input v-model="spaceInfoformService.dinnerPriceMd" style="width:168px;margin-top:-68px;margin-left:50px" placeholder="请输入门店价格"></el-input>
          <span>/间</span>
          <!-- <el-input v-model="spaceInfoform.spaceName" style="width:168px;margin-top:-8px;margin-left:90px" placeholder="请输入门店价格"></el-input><span>/人</span> -->
        </el-form-item>
        <el-form-item label="便利设施" prop="facilities">
          <el-checkbox-group v-model="spaceInfoformService.facilities">
            <el-checkbox v-for="item in facDatas" :label="item" :key="item">{{item}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="拍摄须知" prop="notes">
          <el-input type="textarea" style="width:470px;margin-top:-8px;" :rows="7" v-model="spaceInfoformService.notes" placeholder="提示:拍摄要求请每一条请以句号结尾"></el-input>
        </el-form-item>
      </el-form>
      <div style="display:flex;justify-content:center;">
        <!-- <el-button @click=" onPrevStepFou()">上一步
        </el-button> -->
        <el-button type="primary" @click="addSpaces('spaceInfoformService')">确认添加</el-button>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
import showBanner from '@/base/showBanner/showBanner'
export default {
  name: 'addSpace',
  components: {
    showBanner
  },
  data () {
    return {
      id: '',
      uploadImgUrl: '/api/file/uploadImg',
      keyword: '',
      center: { lng: 116.404, lat: 39.915 },
      zoom: 15,
      dialogVisible: false,
      location: '杭州',
      activeNum: 1,
      multiple: true,
      formDate: [],
      isShow2: false,
      isShow1: false,
      inputVisible: false,
      inputVisible1: false,
      checked: true,
      check2: false,
      check1: true,
      checkSBT: false,
      checkXBT: false,
      showRoom: true,
      type: '',
      architecturalStyle: '',
      feature: '',
      checklist: [],
      spaceId: '',
      imgUrl: [],
      addSteps: '',
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      fileList5: [],
      architecturalStyleList: [],
      featureList: [],
      typeList: [
        {
          value: 1,
          label: '民宿'
        }, {
          value: 2,
          label: '咖啡馆'
        }, {
          value: 3,
          label: '创意空间'
        }, {
          value: 4,
          label: '其他'
        }
      ],
      checkLists: [
        { id: 1, name: '闪光灯' },
        { id: 2, name: '反光板' },
        { id: 3, name: '柔光箱' },
        { id: 4, name: '柔光伞' },
        { id: 5, name: '视频灯' }
      ],
      facDatas: ['衣架', '落地衣架', '挂烫机', 'Wi-Fi', '免费停车'
      ],
      spaceInfoform: {
        spaceName: '',
        avatar: '',
        cover: '',
        mobile: '',
        title: '',
        description: '',
        address: ''
      },
      spaceInfoformImg: {
        type: 1,
        des: '',
        roomName: '公共区域',
        paths: [],
        rooms: [{
          type: 2,
          des: '',
          roomName: '',
          paths: []
        }],
        ypList: [{
          type: 3,
          des: '',
          roomName: '',
          paths: []
        }]
      },
      costPoints: {},
      costPoints2: {},
      costPoints3: {},
      costPoints4: {},
      costPoints5: {},
      costPoints6: {},
      spaceInfoformPrice: {
        startTime: '08:00',
        endTime: '18:00',
        publicPrice: '',
        roomPrice: '',
        maxPeople: '',
        admissionEquipment: [],
        publicWeekendPrice: '',
        roomWeekendPrice: '',
        maxPeopleWeekend: '',
        admissionEquipmentWeekend: [],
        startTimeAm: '08:00',
        endTimeAm: '12:00',
        publicPriceHalfAm: '',
        roomPriceHalfAm: '',
        maxPeopleAm: '',
        admissionEquipmentAm: [],
        publicWeekendPriceHalfAm: '',
        roomWeekendPriceHalfAm: '',
        maxPeopleAmWeekend: '',
        admissionEquipmentAmWeekend: [],
        startTimePm: '14:00',
        endTimePm: '18:00',
        publicPriceHalfPm: '',
        roomPriceHalfPm: '',
        maxPeoplePm: '',
        admissionEquipmentPm: [],
        publicWeekendPriceHalfPm: '',
        roomWeekendPriceHalfPm: '',
        maxPeoplePmWeekend: '',
        admissionEquipmentPmWeekend: []
      },
      spaceInfoformService: {
        stayPriceFc: '',
        stayPriceMd: '',
        lunchPriceFc: '',
        lunchPriceMd: '',
        dinnerPriceFc: '',
        dinnerPriceMd: '',
        facilities: [],
        notes: ''
      }
    }
  },
  watch: {
  },
  created () {
    if (this.$route.query.addSteps == null) {
      this.activeNum = 1
    } else {
      this.activeNum = this.$route.query.addSteps + 1
    }
    if (this.$route.query.type === 1) {
      this.showRoom = true
    } else {
      this.showRoom = false
    }
    // console.log(this.activeNum)
  },
  mounted () {
  },
  computed: {
    rules () {
      let obj = {
        spaceName: [
          { required: true, message: '请输入空间名称', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入空间标题', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入正确手机号码', trigger: 'blur' },
          { pattern: /^1[34578]\d{9}$/, message: '请输入正确手机号码' }
        ],
        description: [
          { required: true, message: '请输入空间简介', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入空间地址', trigger: 'blur' }
        ]
      }
      return obj
    },
    rules1 () {
      let obj = {
      }
      return obj
    },
    rules2 () {
      let obj = {
        publicPrice: [
          { required: true, message: '请输入公共区域价格', trigger: 'blur' }
        ],
        maxPeople: [
          {
            required: true, message: '请输入房间价格', trigger: 'blur'
          }
        ],
        publicPriceHalfAm: [
          { required: true, message: '请输入公共区域价格', trigger: 'blur' }
        ],
        maxPeopleAm: [
          {
            required: true, message: '请输入房间价格', trigger: 'blur'
          }
        ],
        publicPriceHalfPm: [
          { required: true, message: '请输入公共区域价格', trigger: 'blur' }
        ],
        maxPeoplePm: [
          {
            required: true, message: '请输入房间价格', trigger: 'blur'
          }
        ],
        publicWeekendPrice: [
          { required: true, message: '请输入节假日公共区域价格', trigger: 'blur' }
        ],
        maxPeopleWeekend: [
          {
            required: true, message: '请输入节假日房间价格', trigger: 'blur'
          }
        ],
        publicWeekendPriceHalfAm: [
          { required: true, message: '请输入节假日公共区域价格', trigger: 'blur' }
        ],
        maxPeopleAmWeekend: [
          {
            required: true, message: '请输入节假日房间价格', trigger: 'blur'
          }
        ],
        publicWeekendPriceHalfPm: [
          { required: true, message: '请输入节假日公共区域价格', trigger: 'blur' }
        ],
        maxPeoplePmWeekend: [
          {
            required: true, message: '请输入节假日房间价格', trigger: 'blur'
          }
        ]
      }
      if (this.showRoom === true) {
        obj.roomPrice = [
          { required: true, message: '请输入房间价格', trigger: 'blur' }
        ]
        obj.roomPriceHalfAm = [
          { required: true, message: '请输入房间价格', trigger: 'blur' }
        ]
        obj.roomPriceHalfPm = [
          { required: true, message: '请输入房间价格', trigger: 'blur' }
        ]
        obj.roomWeekendPrice = [
          { required: true, message: '请输入节假日房间价格', trigger: 'blur' }
        ]
        obj.roomWeekendPriceHalfAm = [
          { required: true, message: '请输入节假日房间价格', trigger: 'blur' }
        ]
        obj.roomWeekendPriceHalfPm = [
          { required: true, message: '请输入节假日房间价格', trigger: 'blur' }
        ]
      }
      return obj
    },
    rules3 () {
      let obj = {
        notes: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
      return obj
    },
    ...mapGetters([
      'userInfo'
    ]),
    uploadDisabled: function () {
      return this.fileList1.length > 0
    }
  },
  methods: {
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 基本信息下一步
    onSelectStep (spaceInfoform) {
      this.$refs[spaceInfoform].validate((valid) => {
        if (valid) {
          // let imgurl = []
          // imgurl.push(this.fileList1.url)
          this.$axios.post('/api/space/addSpaceMessage', {
            spaceName: this.spaceInfoform.spaceName,
            avatar: JSON.stringify(this.fileList1).split('[').join('').split(']').join(''),
            cover: JSON.stringify(this.fileList2.url).split('[').join('').split(']').join(''),
            title: this.spaceInfoform.title,
            type: this.type,
            mobile: this.spaceInfoform.mobile,
            architecturalStyle: this.architecturalStyleList,
            feature: this.featureList,
            description: this.spaceInfoform.description,
            address: this.spaceInfoform.address,
            latLong: this.center,
            // latLong: this.center(Array.form(this.center)),
            // latLong: JSON.stringify(this.center),
            userId: this.userInfo.userId
          }).then(response => {
            const res = response.data
            console.log(res)
            if (res.code === '00000000') {
              console.log(res)
              this.spaceId = res.id
              this.type = res.type
              if (this.type === 1) {
                this.showRoom = true
              } else {
                this.showRoom = false
              }
              this.activeNum = 2
            } else {
              this.$message.error('上传参数不完整')
            }
          })
        }
      })
    },
    //  图片上传上一步
    onPrevStepScd () {
      this.activeNum = 1
    },
    //  图片上传下一步
    onNextStepScd () {
      // this.imgPost()
      let arr = [{
        roomName: this.spaceInfoformImg.roomName,
        des: this.spaceInfoformImg.des,
        type: 1,
        paths: this.fileList3
      }]
      let o = this.spaceInfoformImg.rooms
      for (let i = 0; i < o.length; i++) {
        arr.push(
          o[i]
        )
      }
      let x = this.spaceInfoformImg.ypList
      for (let i = 0; i < x.length; i++) {
        arr.push(
          x[i]
        )
      }
      this.$axios.post('/api/space/addSpaceImg', {
        // id: 'FC1371191497',
        id: this.spaceId || this.$route.query.id,
        userId: this.userInfo.userId,
        addSteps: 1,
        rooms: arr
      }
      ).then(response => {
        const res = response.data
        console.log(res)
        if (res.code === '00000000') {
          this.activeNum = 3
          console.log(res)
        } else {
          this.$message.error('上传参数不完整')
        }
      })
    },
    beforeUpload () { },
    Change () { },
    // 设置价格上一步
    onPrevStepThd () {
      this.activeNum = 2
    },
    // 设置价格下一步
    onNextStepThr (spaceInfoformPrice) {
      this.$refs[spaceInfoformPrice].validate((valid) => {
        if (valid) {
          let yxjcqc = JSON.stringify(this.costPoints).split('/').join('').split('"').join('').split('{').join('').split('}').join('')
          let yxjcqc2 = JSON.stringify(this.costPoints2).split('/').join('').split('"').join('').split('{').join('').split('}').join('')
          let yxjcqc3 = JSON.stringify(this.costPoints3).split('/').join('').split('"').join('').split('{').join('').split('}').join('')
          let yxjcqc4 = JSON.stringify(this.costPoints4).split('/').join('').split('"').join('').split('{').join('').split('}').join('')
          let yxjcqc5 = JSON.stringify(this.costPoints5).split('/').join('').split('"').join('').split('{').join('').split('}').join('')
          let yxjcqc6 = JSON.stringify(this.costPoints6).split('/').join('').split('"').join('').split('{').join('').split('}').join('')
          console.log(this.costPoints)
          this.$axios.post('/api/space/addSpacePrice', {
            id: this.spaceId || this.$route.query.id,
            userId: this.userInfo.userId,
            addSteps: 2,
            startTime: this.spaceInfoformPrice.startTime,
            endTime: this.spaceInfoformPrice.endTime,
            publicPrice: this.spaceInfoformPrice.publicPrice,
            roomPrice: this.spaceInfoformPrice.roomPrice,
            maxPeople: this.spaceInfoformPrice.maxPeople,
            // admissionEquipment: this.spaceInfoformPrice.admissionEquipment,
            admissionEquipment: yxjcqc,
            publicWeekendPrice: this.spaceInfoformPrice.publicWeekendPrice,
            roomWeekendPrice: this.spaceInfoformPrice.roomWeekendPrice,
            maxPeopleWeekend: this.spaceInfoformPrice.maxPeopleWeekend,
            admissionEquipmentWeekend: yxjcqc2,
            startTimeAm: this.spaceInfoformPrice.startTimeAm,
            endTimeAm: this.spaceInfoformPrice.endTimeAm,
            publicPriceHalfAm: this.spaceInfoformPrice.publicPriceHalfAm,
            roomPriceHalfAm: this.spaceInfoformPrice.roomPriceHalfAm,
            maxPeopleAm: this.spaceInfoformPrice.maxPeopleAm,
            admissionEquipmentAm: yxjcqc3,
            publicWeekendPriceHalfAm: this.spaceInfoformPrice.publicWeekendPriceHalfAm,
            roomWeekendPriceHalfAm: this.spaceInfoformPrice.roomWeekendPriceHalfAm,
            maxPeopleAmWeekend: this.spaceInfoformPrice.maxPeopleAmWeekend,
            admissionEquipmentAmWeekend: yxjcqc4,
            startTimePm: this.spaceInfoformPrice.startTimePm,
            endTimePm: this.spaceInfoformPrice.endTimePm,
            publicPriceHalfPm: this.spaceInfoformPrice.publicPriceHalfPm,
            roomPriceHalfPm: this.spaceInfoformPrice.roomPriceHalfPm,
            maxPeoplePm: this.spaceInfoformPrice.maxPeoplePm,
            admissionEquipmentPm: yxjcqc5,
            publicWeekendPriceHalfPm: this.spaceInfoformPrice.publicWeekendPriceHalfPm,
            roomWeekendPriceHalfPm: this.spaceInfoformPrice.roomWeekendPriceHalfPm,
            maxPeoplePmWeekend: this.spaceInfoformPrice.maxPeoplePmWeekend,
            admissionEquipmentPmWeekend: yxjcqc6
          }
          ).then(response => {
            const res = response.data
            console.log(res)
            if (res.code === '00000000') {
              this.activeNum = 4
              console.log(res)
            } else {
              this.$message.error('上传参数不完整')
            }
          })
        }
      })
    },
    // 配套服务上一步
    onPrevStepFou () {
      this.activeNum = 3
    },
    // 确认添加
    addSpaces (spaceInfoformService) {
      this.$refs[spaceInfoformService].validate((valid) => {
        if (valid) {
          this.$axios.post('/api/space/addSpaceSupportingServices', {
            id: this.spaceId || this.$route.query.id,
            userId: this.userInfo.userId,
            addSteps: 3,
            stayPriceFc: this.spaceInfoformService.stayPriceFc,
            stayPriceMd: this.spaceInfoformService.stayPriceMd,
            lunchPriceFc: this.spaceInfoformService.lunchPriceFc,
            lunchPriceMd: this.spaceInfoformService.lunchPriceMd,
            dinnerPriceFc: this.spaceInfoformService.dinnerPriceFc,
            dinnerPriceMd: this.spaceInfoformService.dinnerPriceMd,
            facilities: JSON.stringify(this.spaceInfoformService.facilities).split('/').join('').split('"').join('').split('[').join('').split(']').join(''),
            notes: this.spaceInfoformService.notes
          }
          ).then(response => {
            const res = response.data
            console.log(res)
            if (res.code === '00000000') {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.$router.push({ name: 'spaceControl' })
              console.log(res)
            } else if (res.code === '00000001') {
              this.$message({
                message: '添加失败',
                type: 'error'
              })
            }
          })
        }
      })
    },
    // 添加标签
    handleClose (tag) {
      this.architecturalStyleList.splice(this.architecturalStyleList.indexOf(tag), 1)
    },
    handleClose1 (tag1) {
      this.featureList.splice(this.featureList.indexOf(tag1), 1)
    },
    showInput () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    showInput1 () {
      this.inputVisible1 = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput1.$refs.input.focus()
      })
    },
    handleInputConfirm () {
      let architecturalStyle = this.architecturalStyle
      if (architecturalStyle) {
        this.architecturalStyleList.push(architecturalStyle)
      }
      this.inputVisible = false
      this.architecturalStyle = ''
    },
    handleInputConfirm1 () {
      let feature = this.feature
      if (feature) {
        this.featureList.push(feature)
      }
      this.inputVisible1 = false
      this.feature = ''
    },
    // 地图
    getClickInfo (e) {
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
    },
    syncCenterAndZoom (e) {
      const { lng, lat } = e.target.getCenter()
      this.center.lng = lng
      this.center.lat = lat
      this.zoom = e.target.getZoom()
    },
    // 上传图片
    uploadImg (a) {
      var formdata = new FormData()
      formdata.append('items', a.file)
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      this.$axios.post(this.uploadImgUrl, formdata, config).then((res) => {
        console.log(res.data.code)
        if (res.data.code === '00000000') {
          let imgUrl = []
          imgUrl.push(res.data.url)
          // this.fileList1.url = res.data.url
          // this.fileList1.push({
          //   url: res.data.url
          // })
          this.$message({
            message: '添加成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '图片上传不成功',
            type: 'warning'
          })
        }
      })
      this.fileList1.push(this.imgUrl)
      console.log(this.fileList1)
    },
    // 上传图片限制
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('上传图片只能是 PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }

      return isJPG && isLt2M
    },
    uploadImg1 (a) {
      var formdata = new FormData()
      formdata.append('items', a.file)
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      this.$axios.post(this.uploadImgUrl, formdata, config).then((res) => {
        console.log(res.data.code)
        if (res.data.code === '00000000') {
          this.fileList2.url = res.data.url
          this.$message({
            message: '添加成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '图片上传不成功',
            type: 'warning'
          })
        }
      })
    },
    submit () {
      this.formDate = new FormData()
      this.$refs.uploadb.submit()
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      this.$axios.post(this.uploadImgUrl, this.formDate, config).then((res) => {
        console.log(res.data.code)
        if (res.data.code === '00000000') {
          this.fileList3 = res.data.url
          console.log(this.fileList3.url)
          this.$message({
            message: '添加成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '图片上传不成功',
            type: 'warning'
          })
        }
      })
    },
    submit1 (room) {
      let i = this.spaceInfoformImg.rooms.indexOf(room)
      if (i !== -1) {
        console.log(this.$refs.upload[i])
        this.formDate = new FormData()
        console.log(this.formDate)
        this.$refs.uploada[i].submit()
        const config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        this.$axios.post(this.uploadImgUrl, this.formDate, config).then((res) => {
          console.log(res.data.code)
          if (res.data.code === '00000000') {
            this.fileList4[i] = res.data.url
            this.spaceInfoformImg.rooms[i].paths = this.fileList4[i]
            console.log(this.spaceInfoformImg.rooms[i].paths)
            this.$message({
              message: '添加成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '图片上传不成功',
              type: 'warning'
            })
          }
        })
      }
    },
    submit2 (yp) {
      let index = this.spaceInfoformImg.ypList.indexOf(yp)
      if (index !== -1) {
        console.log(this.$refs.upload[index])
        this.formDate = new FormData()
        this.$refs.upload[index].submit()
        const config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        this.$axios.post(this.uploadImgUrl, this.formDate, config).then((res) => {
          console.log(res.data.code)
          if (res.data.code === '00000000') {
            this.fileList5[index] = res.data.url
            console.log(this.fileList5[index])
            this.spaceInfoformImg.ypList[index].paths = this.fileList5[index]
            this.$message({
              message: '添加成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '图片上传不成功',
              type: 'warning'
            })
          }
        })
      }
    },
    uploadImg2 (a, fileList) {
      this.formDate.append('items', a.file)
    },
    uploadImg3 (c, fileList) {
      this.formDate.append('items', c.file)
    },
    uploadImg4 (b, fileList) {
      this.formDate.append('items', b.file)
    },
    add (room, i) {
      // this.isShow1 = true
      this.spaceInfoformImg.rooms.push({
        roomName: '',
        des: '',
        type: 2,
        paths: []
      })
    },
    addYp (yp, index) {
      // this.isShow2 = true
      this.spaceInfoformImg.ypList.push({
        roomName: '',
        des: '',
        type: 3,
        paths: []
      })
    },
    del (item) {
      // var index = this.rooms.indexOf(item)
      // this.rooms.splice(index, 1)
      var i = this.spaceInfoformImg.rooms.indexOf(item)
      if (i !== 0) {
        this.spaceInfoformImg.rooms.splice(i, 1)
      }
    },
    delYp (item) {
      var index = this.spaceInfoformImg.ypList.indexOf(item)
      if (index !== 0) {
        this.spaceInfoformImg.ypList.splice(index, 1)
      }
    },
    checkinlist () {
      console.log(this.checkList)
    },
    checkBoxList (a, b) {
      console.log(a, b)
    },
    aaa (a) {
      console.log(a, this.costPoints)
    },
    print () {
      console.log(this.costPoints)
    }
    // handleSuccess (response, file, fileList) {
    //   console.log(fileList)
    //   // let key = response.key
    //   // let name = file.name
    //   // let prefix = this.supportWebp ? 'webp/' : ''
    //   // let img = `![${name}](${this.bucketHost}/${prefix}${encodeURI(key)})`
    //   this.spaceInfoform.avatar = response.data.url
    //   console.log(this.spaceInfoform.avatar)
    // }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../../assets/stylus/variable'
.addSpace
  margin 16px
  background #fff
  min-height 800px
  padding-bottom 28px
  .content
    padding 16px
    display flex
    justify-content center
.disabled .el-upload--picture-card
  display none
.el-tag + .el-tag
  margin-left 10px
.button-new-tag
  margin-left 10px
  height 32px
  line-height 30px
  padding-top 0
  padding-bottom 0
.input-new-tag
  width 90px
  margin-left 10px
  vertical-align bottom
.avatar-uploader .el-upload
  border 1px dashed #d9d9d9
  border-radius 6px
  cursor pointer
  position relative
  overflow hidden
.avatar-uploader .el-upload:hover
  border-color #409EFF
.avatar-uploader-icon
  font-size 28px
  color #8c939d
  width 178px
  height 178px
  line-height 178px
  text-align center
.avatar
  width 178px
  height 178px
  display block
.disabled .el-upload--picture-card
  display none
</style>
